<script setup>
import { computed, onMounted, ref } from "vue";
import { bus } from "../../mitt/mitt";
import { UserFilled, InfoFilled } from "@element-plus/icons-vue";
import { getUserInfo, upd, updPassword } from "../../services/user";
import Upload from "../../components/Upload.vue";
import { ElMessage } from "element-plus";
import { isLoginStore } from "../../store/IsLoginStore";
const isLogin = isLoginStore();
const userCacheData = computed(() => {
  return JSON.parse(localStorage.getItem("userData"));
});
//用户信息
const userData = ref({});
const userInfoGet = () => {
  getUserInfo()
    .then((res) => {
      userData.value = res.data;
      userForm.value = res.data;
    })
    .catch((err) => {});
};

//标签
const activeName = ref("edit-baseinfo");
//用户信息表单
const userForm = ref({});
const formLabelWidth = "80px";
const updUserInfo = (formEl) => {
  formEl.validate((valid, fields) => {
    if (valid) {
      upd(userForm.value)
        .then((res) => {
          if (res.data) {
            let userInfo = JSON.parse(localStorage.getItem("userData"));
            userInfo.headPic = userForm.value.headPic;
            userInfo.fullName = userForm.value.fullName;
            localStorage.setItem("userData", JSON.stringify(userInfo));
            ElMessage({
              message: "修改成功",
              type: "success",
            });
          }
        })
        .catch((err) => {});
    }
  });
};
//密码表单
const passwordData = ref({});
const passwrodForm = ref(null);
const passwordRules = ref({
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
  ],
});
const passwordUpd = (formEl) => {
  formEl.validate((vaild) => {
    if (vaild) {
      updPassword(passwordData.value)
        .then((res) => {
          if (res.data) {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
          }
        })
        .catch((err) => {});
    }
  });
};
// 图片回调
const handleUploadSuccess = (imageUrl) => {
  userForm.value.headPic = imageUrl;
};
//关闭
const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};
const close = () => {
  dialogVisible.value = false;
};
//校验
const rules = ref({
  fullName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
});
const userFormRef = ref(null);
onMounted(() => {
  bus.on("exitPersonalCenter", () => {
    userInfoGet();
    if (isLogin.getIsLoginFlag) {
      dialogVisible.value = true;
    }
  });
});
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="dialogVisible"
    title="个人中心"
    width="80%"
    :before-close="handleClose"
  >
    <el-row>
      <el-col :span="8" style="padding-left: 50px">
        <el-card class="el-card">
          <span style="font-size: 20px; color: #5a5a5a">个人信息</span>
          <el-divider class="divider"></el-divider>
          <div class="avatar_div">
            <el-avatar
              class="avatar"
              v-if="userData.headPic"
              :src="userData.headPic"
            ></el-avatar>
            <el-avatar class="avatar" v-else :icon="UserFilled"></el-avatar>
          </div>
          <el-divider class="divider"></el-divider>
          <div class="list-group">
            <ul class="list-group-ul">
              <li class="list-group-item">
                <i class="el-icon-document">用户（ID）</i>
                <span class="span-right">{{ userData.username || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-user-solid">用户名称</i>
                <span class="span-right">{{ userData.fullName || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-full-screen">用户年龄</i>
                <span class="span-right">{{ userData.age || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-phone">手机号码</i>
                <span class="span-right">{{ userData.phone || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-office-building">所在地址</i>
                <span class="span-right">{{ userData.address || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-s-custom">所属角色</i>
                <span class="span-right">{{
                  userCacheData.roleName || "-"
                }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-time">注册时间</i>
                <span class="span-right">{{ userData.regTime || "-" }}</span>
              </li>
              <el-divider class="li-divider"></el-divider>
              <li class="list-group-item">
                <i class="el-icon-time">登录时间</i>
                <span class="span-right">{{ userData.endTime || "-" }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" style="padding-left: 50px; padding-right: 50px">
        <el-card class="el-card">
          <span style="font-size: 20px; color: #5a5a5a">基本信息</span>
          <el-divider class="divider"></el-divider>
          <div class="slider-change">
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="edit-baseinfo">
                <el-form :model="userForm" ref="userFormRef" :rules="rules">
                  <el-form-item
                    label="姓名"
                    prop="fullName"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      size="small"
                      v-model="userForm.fullName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="电话号码"
                    prop="phone"
                    :label-width="formLabelWidth"
                  >
                    <el-input size="small" v-model="userForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="年龄"
                    prop="age"
                    :label-width="formLabelWidth"
                  >
                    <el-input size="small" v-model="userForm.age"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="性别"
                    prop="gender"
                    style="width: 420px"
                    :label-width="formLabelWidth"
                  >
                    <el-radio v-model="userForm.gender" :label="1">男</el-radio>
                    <el-radio v-model="userForm.gender" :label="2">女</el-radio>
                  </el-form-item>
                  <el-form-item
                    label="地址"
                    prop="address"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      size="small"
                      v-model="userForm.address"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="头像"
                    prop="headPic"
                    :label-width="formLabelWidth"
                  >
                    <Upload
                      :imageUrl="userForm.headPic"
                      @upload-success="handleUploadSuccess"
                    ></Upload>
                  </el-form-item>
                  <div class="button">
                    <el-button type="primary" @click="updUserInfo(userFormRef)"
                      >确定</el-button
                    >
                    <el-button type="primary" @click="close()">关闭</el-button>
                  </div>
                </el-form>
              </el-tab-pane>
              <el-tab-pane name="edit-password">
                <template #label>
                  <span>修改密码</span>
                  <el-tooltip
                    effect="dark"
                    content="注：gitee登录默认密码123456"
                    placement="top-start"
                  >
                    <el-icon style="font-size: 18px; color: black"
                      ><InfoFilled
                    /></el-icon>
                  </el-tooltip>
                </template>
                <el-form
                  :model="passwordData"
                  ref="passwrodForm"
                  :rules="passwordRules"
                >
                  <el-form-item
                    label="旧密码"
                    prop="oldPassword"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      show-password
                      type="password"
                      size="small"
                      v-model="passwordData.oldPassword"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="新密码"
                    prop="newPassword"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      show-password
                      type="password"
                      size="small"
                      v-model="passwordData.newPassword"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="确认密码"
                    prop="confirmPassword"
                    :label-width="formLabelWidth"
                  >
                    <el-input
                      show-password
                      type="password"
                      size="small"
                      v-model="passwordData.confirmPassword"
                    ></el-input>
                  </el-form-item>
                  <div class="button">
                    <el-button type="primary" @click="passwordUpd(passwrodForm)"
                      >确定</el-button
                    >
                    <el-button type="primary" @click="close()">关闭</el-button>
                  </div>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style lang="less" scoped>
.el-card {
  height: 100%;
}
.avatar_div {
  justify-content: center;
  display: flex;
  .avatar {
    height: 120px;
    width: 120px;
    border-radius: 50%;
  }
}
.list-group {
  display: flex;
  flex-direction: column;
  .list-group-ul {
    .li-divider {
      margin-top: 15px;
    }
    .list-group-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .span-right {
        white-space: normal;
        max-width: 180px;
      }
    }
  }
}
.button {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 50px; /* 可根据需要调整按钮与表单项之间的间距 */
}
</style>
